<template>
    <div class="phot-component-add-material">
        <LayoutHeader :title="title" :command="command"></LayoutHeader>
        <div class="content">
            <div class="top">
                <div class="input-element">
                    <label><span>材料名称:</span><pui-input v-model="materialRef.name"></pui-input></label>
                </div>
                <div class="input-element">
                    <label><span>波长:</span><pui-input v-model="materialRef.waveLength"></pui-input></label>
                </div>
                <div class="input-element">
                    <label><span>复折射率实部:</span><pui-input v-model="materialRef.real"></pui-input></label>
                </div>
                <div class="input-element">
                    <label><span>复折射率虚部:</span><pui-input v-model="materialRef.imag"></pui-input></label>
                </div>
                <div class="input-element">
                    <label><span>材料颜色:</span><pui-color-picker v-model="materialRef.color" @changeColor="changeColor"></pui-color-picker></label>
                </div>
            </div>
            <div class="bottom">
                <pui-button type="primary" @click="submitForm">确定</pui-button>
                <pui-button>取消</pui-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
    name: "Content",
})
</script>
<script lang="ts" setup>
import { reactive } from "vue";
import LayoutHeader from '../LayoutHeader.vue'
import headerData from './index'
import { MaterialProperty, Material } from '../models/material'
import { deviceManager } from "@/services/phot_client/device";
import { PhotMaterial, PhotMaterialProperty } from "@/common/types/phot_types"
import { uid_rt } from "@/common/types/base_types"
const {title, command} = reactive(headerData.headerRef)
const materialRef = reactive({
    name: '',
    waveLength: '',
    real: '',
    imag: '',
    color: ''
})
const changeColor = (val :any) => {
    console.log(val)
    materialRef.color = val
}
const submitForm = async () => {
    const waveLength = Number(materialRef.waveLength)
    const real = Number(materialRef.real)
    const imag = Number(materialRef.imag)
    const materialProperty = new PhotMaterialProperty({propertyId: uid_rt(),waveLength,real,imag})
    const properties: PhotMaterialProperty[] = []
    properties.push(materialProperty)
    const material = new PhotMaterial({
        name: materialRef.name,
        color: materialRef.color,
        properties
    })
    console.log(material)
    await deviceManager.addMaterial(material)
}
</script>

<style lang="scss" scoped>
.phot-component-add-material {
    box-sizing: border-box;
    font-size: 12px;
    position: flex;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    .content {
        .top {
            margin: 0 auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 20px;
            label {
                display: flex;
                justify-content: space-between;
                span {
                    display: flex;
                    font-size: 12px;
                    line-height: 20px;
                    font-family: 'Source Han Sans Medium';
                    align-self: center;
                    user-select: none;
                }
                pui-input {
                    margin-left: 10px;
                    width: 100px;
                    height: 28px;
                }
            }

        }
        .bottom {
            position: absolute;
            bottom: 0;
            right: 20px;
            padding: 10px;
            text-align: right;
        }

    }
}

</style>